<template>
  <div>
    <base-dialog width="400px" :title="title" v-model:visible="innerVisible">
      <websiteTree
        ref="websiteTreeTable"
        :expand-all="false"
        :checked-row-keys="checkedRowKeys"
        height="400px"
        :tree-cus-data="data"
        :tree-select-type="mutiSelect ? 'checkbox' : 'radio'"
        row-id="code"
        @handle-node-click="handleSubmit"
      />
      <div v-if="mutiSelect" class="dialog-footer">
        <el-button @click="innerVisible = false">{{ $t("取消") }}</el-button>
        <el-button type="primary" @click="handleSubmit">{{
          $t("确定")
        }}</el-button>
      </div>
    </base-dialog>
  </div>
</template>
<script setup>
import { ref, watch , computed } from "vue";
import websiteTree from "./website-tree.vue";
const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return null;
    },
  },
  visible: {
    type: Boolean,
  },
  title: {
    type: String,
    default: "选择网点",
  },
  mutiSelect: {
    type: Boolean,
    default: false,
  },
  checkedRowKeys: {
    type: Array,
    default: () => {
      return [];
    },
  },
  treeType: {
    type: String,
    default: "website",
  },
});
const emit = defineEmits(["update:visible", "handleSubmit"]);

let innerVisible = computed({
  get: () => {
    return props.visible;
  },
  set: (val) => {
    emit("update:visible", val);
  },
});
const websiteTreeTable = ref();
function handleSubmit(val) {
  const data = !props.mutiSelect
    ? val
    : websiteTreeTable.value.getCheckboxRecords();
  emit("handleSubmit", data);
  innerVisible.value = false;
}
</script>
